<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, Ref, watch } from 'vue';

  import { useECharts } from '/@/hooks/web/useECharts';

  export default defineComponent({
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '100%',
      },
      xData: {
        type: Array as PropType<any[]>,
        default: () => [],
      },
      data: {
        type: Array as PropType<any[]>,
        default: () => [],
      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      // echarts
      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);

      watch(
        () => props.data,
        () => {
          init();
        },
      );
      function init() {
        const { xData = [], data = [] } = props;
        setOptions({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#1153D8',
              },
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: [3, 4],
                },
              },
            },
          ],
          grid: { left: '1%', right: '2%', top: '2%', bottom: 16, containLabel: true },
          series: [
            {
              data,
              type: 'line',
              smooth: true,
              showSymbol: false,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(22, 93, 255, 0.2)' },
                  { offset: 0.2, color: 'rgba(22, 93, 255, 0.1)' },
                  { offset: 1, color: 'rgba(22, 93, 255, 0)' },
                ]),
              },
              itemStyle: {
                color: '#165DFF',
              },
            },
          ],
        });
      }
      return { chartRef };
    },
  });
</script>
